<template>
	<el-drawer class="zs-drawer-custom" v-model="isShowDrawer" direction="rtl" :show-close="true" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
            <div class="zs-drawer-header" :id="titleId" :class="titleClass">
                <i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
                <div class="zs-title zs-text-black">说明</div>
            </div>
        </template>
		<template #default>
			
			<div class="zs-drawer-container zs-layout-flex-col">
				<div class="zs-drawer-header-tab" :id="titleId" :class="titleClass">
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="说明" name="explain"></el-tab-pane>
					<el-tab-pane label="审批意见" name="approve"></el-tab-pane>
				</el-tabs>
			</div>
				<el-input v-if="activeName == 'explain'" class="zs-layout-grow dashboard-projectAllListDesDialog-input dashboard-projectAllListDesDialog-input-disabled" v-model="des" type="textarea" placeholder="" :disabled="true" />
				<ApproveList v-else :list="approveList"></ApproveList>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import { ref } from 'vue';
	import { useStore } from 'vuex';
	import detailApi from '@/api/Manage/Business/detailPages';
	import ApproveList from './approveList.vue';
	import { parseTime } from '@/utils/publicUtils';

	let store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSizeBig);
	const props = defineProps({
		isShow: { type: Boolean, default: false },
		projectCode: { type: String, default: '' },
		yearmonth: { type: String, default: '' },
		isReadOnly: { type: Boolean, default: false },
	});

	const emit = defineEmits(['close']);
	const des = ref('');
	const id = ref('');
	const bpmTaskKey = ref('');
	const isShowDrawer = ref(props.isShow);
	let activeName = ref('explain');

	// 关闭drawer
	const handleClose = done => {
		closeFn();
		done();
	};

	const closeFn = () => {
		emit('close', { isShow: false });
	};

	//tab切换
	const handleClick = item => {
		if (item.paneName == 'explain') {
			getDes();
		} else {
			getApproveInfo();
		}
	};

	//说明信息
	const getDes = () => {
		detailApi.bedgetcExplainInfoNewApi({ biProjectCode: props.projectCode, yearmonth: props.yearmonth }).then(res => {
			if (res.data.code == 200 && res.data.data) {
				des.value = res.data.data.remark;
				id.value = res.data.data.id;
				bpmTaskKey.value = res.data.data.bpmTaskKey;
			}
		});
	};

	//审批信息
	let approveList = ref([]);
	const getApproveInfo = async () => {
		if (!bpmTaskKey.value) return;
		let res = await detailApi.bedgetcExplainApproveApi(bpmTaskKey.value);
		let list = Object.assign(res.data.data || []);
		list.forEach(item => {
			item.formatAuditTime = parseTime(item.auditTime)
		})
		approveList.value = list;
	};
	getDes();
</script>

<style scoped lang="scss">
	:deep(.el-textarea__inner) {
		height: 100% !important;
		width: 100% !important;
		background: #ffffff !important;
	}
	.zs-drawer-header-tab {
		position: relative;
	}
	.closeBtn {
		position: absolute;
		right: 20px;
		top: 10px;
		z-index: 999;
		cursor: pointer;
	}
	.closeBtn:hover {
		color: #79bbff;
	}
</style>
